<template>
  <div class='line-chart' id="line-chart">
    {{getData}}
  </div>
</template>
<script>
export default {
  props:['data'],
  components: {},
  name: "",
  data() {
    return {
      options:{
        backgroundColor:"#fff",
        title:{
          text:"订单数",
          left:"20",
          top:"20"
        },
        tooltip : {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
        },
        yAxis: {
          type: 'value',
          interval:1
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth:true,
          symbolSize:"0",
          areaStyle: {
            color:{
              type: 'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {offset: 0, color: '#6dbeff'},
                {offset: 1, color: '#d3dfe8'}
              ]
            }
          },
          lineStyle:{
            color:"#6dbeff",
            width:"5"
          },
          itemStyle:{
            color:"#6dbeff",
          }
        }]
      },

      myChart:null,
    };
  },
  computed:{
    getData(){
      this.options.series[0].data=this.data
      if(this.myChart)this.myChart.setOption(this.options);
    }
  },
  methods: {
    init(){
      this.myChart = echarts.init(document.getElementById('line-chart'));
      this.myChart.setOption(this.options);
    }
  },
  created() {
    this.$nextTick(()=>{
      this.init()
    })
  }
};
</script>
<style lang="scss" scoped>
.line-chart {
  height: 600px;
}
</style>